<{include file="public/header.html"}> 
	<header class="title title-border-sm bj-white">
            <a href="<{eval url('account/index')}>" class="icon-return iconfont title-left title-top col-red">&#xe604;</a>
			<h1 class="text-center name">银行卡绑定</h1>
	</header>
	<div class="coin-page">
		<ul class="coin-detail" style="border-top: 0;">
			<li onclick="window.location.href=$(this).attr('data-href');" data-href="<{eval url('user/cash_bind')}>?type=1" style="width:45%">支付宝绑定</li>
			<li class="active" onclick="window.location.href=$(this).attr('data-href');" data-href="<{eval url('user/cash_bind')}>?type=2" style="width:45%">银行卡绑定</li>
		</ul>
	</div>
	<form id="bank-form" class="plr15 mt50" data-href="<{eval url('user/bind_bank')}>" onsubmit="return false;">
		<div class="input-group input-group-tip">
			<p>开户姓名</p>
			<input type="text" name="Name" id="Name" placeholder="请务必填写您的真实姓名" data-validate="Name"/>
		</div>

		<div class="security">
			<ul>
				<li class="border-bottom-sm">
					<a href="javascript:;" class="f-cb plr5" id="banktype_on">
						<p class="fl">银行类型</p>
						<font class="iconfont fr ml5 col-greyccc">&#xe630;</font>
						<i class="fr col-grey999" id="bankType_name">选择银行</i>
						<input type="hidden" name="bankType" id="bankType" data-validate="bankType" value=""/>
					</a>
				</li>
			</ul>
		</div>
		<div class="input-group input-group-tip">
			<p>开户行</p>
			<input type="text" name="bankHome" id="bankHome" placeholder="请填写您的银行卡开户行" data-validate="bankHome"/>
		</div>
		<div class="input-group input-group-tip">
			<p>银行卡号</p>
			<input type="text" name="Account" id="Account" placeholder="请输入您的银行卡帐号" data-validate="Account"/>
		</div>
		<div class="input-group input-group-tip">
			<p>确认卡号</p>
			<input type="text" name="reAccount" id="reAccount" placeholder="请重新您的银行卡帐号" data-validate="reAccount"/>
		</div>
		<div class="input-group input-group-70">
			<input type="text" name="uCode" id="uCode" maxlength="6" placeholder="输入短信验证码" oninput="if(value.length>6)value=value.slice(0,6)" data-validate="code" data-describedby="code-description" />
			<a href="javascript:;" class="send-code fr col-red bj-greyf0" id="send-code-btn">获取验证码</a>
		</div>
                <input type="submit" id="form-modify-btn" class="btn btn-yes mt10" value="确认保存"/>
	</form>
<div class="public-field-bj publick-jq2 bank_type" id="bank_type">
	<div class="public-field-phone w100 bank_type_cont" id="bank_type_cont" style="bottom: 5px;">
		<div class="plr15">
			<ul class="bj-white">
				<li data-type="0">选择银行</li>
				<li data-name="中国工商银行">中国工商银行</li>
				<li data-name="中国建设银行">中国建设银行</li>
				<li data-name="中国银行">中国银行</li>
				<li data-name="中国农业银行">中国农业银行</li>
				<li data-name="招商银行">招商银行</li>
				<li data-name="交通银行">交通银行</li>
				<li data-name="农村信用社">农村信用社</li>
				<li data-name="广发银行">广发银行</li>
				<li data-name="中国邮政储蓄">中国邮政储蓄</li>
			</ul>
			<button class="btn bj-white mt5 close-jq _close">取消</button>
		</div>
	</div>
</div>
<script type="text/javascript">
    $("#banktype_on").click(function () {
        $("#bank_type").stop().fadeIn();
    });
    $("#bank_type").click(function () {
        $("#bank_type").stop().fadeOut();
    });
    $("#bank_type").children().find('ul li').click(function(){
        var _this = $(this),
            _name = _this.attr("data-name");
        $("#bankType_name").html(_name);
        $("#bankType").val(_name);
    });

var send_flag = true;
$(function(){
    var check_flag = true,check_count = 0;
    $.mvalidateExtend({
        Name:{
            required : true,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请填写您的真实姓名</div>',
            }
        },
        bankType:{
            required : true,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请选择银行类型</div>',
            }
        },
        bankHome:{
            required : true,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请填写您的银行卡开户行</div>',
            }
        },
        Account:{
            required : true,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请输入您的银行卡帐号</div>',
            }
        },
        reAccount:{
            required : true,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请再次输入您的银行卡帐号</div>',
            }
        },
        code:{
            required : true,
            pattern : /\b\d{6}\b/,
            each:function(){

            },
            descriptions:{
                required : '<div class="field-invalidmsg">请输入手机验证码</div>',
                pattern : '<div class="field-invalidmsg">请输入有效的验证码</div>',
            }
        }
    });
     $("#bank-form").mvalidate({
        type:1,
        onKeyup:true,
        sendForm:true,
        firstInvalidFocus:false,
        descriptions: {},
        valid:function(event,options){
            if($('#reAccount').val() != $('#Account').val()){$.mvalidateTip("两次输入的帐号不一致哦");return;}
            add_check_oper_listener();
            var url = $("#bank-form").attr("data-href");
            check_flag = false;
            $("#form-modify-btn").val("保存中...");
            $.ajax({
                type: "POST",
                url: url,
                async:true, 
                data: $("#bank-form").serialize(),
                success: function(resp) {
                    resp = $.parseJSON(resp);
                    if(resp.reqStatus){
                        $.mvalidateTip("保存成功");
                        $("#form-modify-btn").val("确认保存");
                        cancel_check_oper_listener();
                        setTimeout(function () {
                            location.href = "/user/bind_list.html?type=2";
                        }, 2000);
                    }else{
                        cancel_check_oper_listener();
                        $("#form-modify-btn").val("重新保存");
                        $.mvalidateTip(resp.errorMsg);
                        return false;
                    }
                }
            });
        },
        invalid:function(event, status, options){
            //点击提交按钮时,表单未通过验证触发函数
        },
        eachField:function(event,status,options){
            //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
        },
        eachValidField:function(val){},
        eachInvalidField:function(event, status, options){},
    })
    
    function add_check_oper_listener(){
        if(check_count == 2){
            check_count = 0;
            $.mvalidateTip("操作过于频繁");return false;
        }
        if(!check_flag){
            check_count ++;
            $.mvalidateTip("正在处理操作");return false;
        }
    };
    function cancel_check_oper_listener(){
        check_count = 0;
        check_flag = true;
    }
    
    var total_time = 60;
    
    $("#send-code-btn").on("click",function(){
        var _self = $(this);
        if(!send_flag){
            $.mvalidateTip("操作过于频繁");return;
        }
        
        var start_time = function(){
            for (var i = 1; i <= total_time; i++) {
                window.setTimeout("update_p("+ i + "," + total_time + ")", i * 1000);
            }
        }
        var send = function(){
            send_flag = false;
            $.ajax({
                type: "POST",
                url: "/ajax/send_bind_code",
                async:true, 
                data: {aa:Math.random()},
                success: function(resp) {
                    resp = $.parseJSON(resp);
                    if(resp.reqStatus){
                        $.mvalidateTip("验证码已发送");
                        return start_time();
                    }else{
                        send_flag = true;
                       	$.mvalidateTip(resp.errorMsg);
                        if(resp.errorNo==1){
                            setTimeout(function(){//两秒后跳转
                                location.href="/account/bindmobile.html";
                            },2000);
                        }
                        return;
                    }
                }
            });
        }
        send();
    });
});
var update_p = function(num,t){
    if (num == t) {
        $("#send-code-btn").text("重新获取").addClass("col-red").removeClass("col-grey999");
        send_flag = true;
    } else {
        var printnr = t - num;
        $("#send-code-btn").text("剩余"+printnr + "秒").removeClass("col-red").addClass("col-grey999");
    }
}
</script>
<{include file="public/footer.html"}> 